Partial Views এবং View Components

Web Development - এএসপি ডট (ASP.Net) - ভিউ (Views) এবং HTML Helpers |

ASP.Net MVC এবং ASP.Net Core MVC অ্যাপ্লিকেশনে Partial Views এবং View Components দুইটি অত্যন্ত শক্তিশালী ফিচার, যা আপনার অ্যাপ্লিকেশনের ভিউ লজিক এবং UI রেন্ডারিংকে আরও কার্যকর ও পুনঃব্যবহারযোগ্য করতে সহায়তা করে। এগুলো একে অপরের থেকে আলাদা হলেও, দুটি উপাদানই ডাইনামিক কন্টেন্ট রেন্ডার করতে এবং কোড পুনঃব্যবহারযোগ্যতা নিশ্চিত করতে ব্যবহৃত হয়।

Partial Views

Partial View হলো একটি ছোট, পুনঃব্যবহারযোগ্য ভিউ যা অন্য ভিউয়ের মধ্যে ইনক্লুড করা যায়। এটি পুরো পেজ রেন্ডার করার পরিবর্তে, শুধু একটি নির্দিষ্ট অংশ রেন্ডার করার জন্য ব্যবহৃত হয়। Partial Views সাধারণত ছোট UI উপাদান (যেমন, ফর্ম, টেবিলের সারি, ন্যাভিগেশন বার) রেন্ডার করার জন্য উপকারী।

Partial View এর ব্যবহার

Partial View তৈরি করা
প্রথমে, আপনার ভিউ ফোল্ডারে একটি Partial View তৈরি করতে হবে। এটি একটি সাধারণ .cshtml ফাইল যা আপনার UI অংশ ধারণ করে।
উদাহরণ:
```

@model IEnumerable<Product>

<ul>
@foreach(var product in Model)
{
    <li>@product.Name - @product.Price</li>
}
</ul>
```
এখানে, _ProductList.cshtml একটি Partial View যা Product মডেলের একটি লিস্ট রেন্ডার করে।
Partial View ইনক্লুড করা
এখন, আপনি এই Partial View কে অন্য একটি ভিউয়ের মধ্যে ইনক্লুড করতে পারবেন।
উদাহরণ:
```

@model IEnumerable<Product>

<h2>Product List</h2>
@Html.Partial("_ProductList", Model)
```
এখানে, @Html.Partial() ব্যবহার করে _ProductList.cshtml নামের Partial View ইনক্লুড করা হয়েছে।
আপনি যদি নির্দিষ্ট ডেটা না পাঠাতে চান, তবে আপনি কেবল @Html.Partial("_ProductList") ব্যবহার করতে পারেন, যদি আপনার Partial View এ কোন মডেল পাস করার প্রয়োজন না হয়।
Ajax ব্যবহার করে Partial View রেন্ডারিং
আপনি Ajax এর মাধ্যমে ডাইনামিকভাবে Partial View রেন্ডার করতে পারেন, যেমন:
```
$.ajax({
    url: '/Home/GetProducts',
    success: function(result) {
        $('#productListContainer').html(result);
    }
});
```
এখানে, HomeController থেকে AJAX কল করে পণ্য তালিকা আনা হচ্ছে এবং ডোম-এ রেন্ডার করা হচ্ছে।

View Components

View Components হলো আরও শক্তিশালী এবং নমনীয় উপাদান, যা Partial Views এর তুলনায় বেশি লজিকাল এবং ডাইনামিক। এটি আসলে একটি C# ক্লাস যা ভিউয়ের মধ্যে রেন্ডার করার জন্য ডেটা প্রক্রিয়াকরণ এবং লজিকাল কাজ সম্পাদন করতে ব্যবহৃত হয়। View Components সাধারণত একাধিক Partial View এর সমন্বয়ে একটি ডাইনামিক UI উপাদান তৈরি করে এবং ডেটা কন্ট্রোলার থেকে সরাসরি পাঠানোর পরিবর্তে, নিজস্ব লজিক প্রয়োগ করে ডেটা রেন্ডার করে।

View Component এর ব্যবহার

View Component তৈরি করা
প্রথমে, একটি View Component ক্লাস তৈরি করতে হবে। এটি একটি সাধারণ C# ক্লাস যা ViewComponent থেকে ইনহেরিট করবে।
উদাহরণ:
```
public class ProductListViewComponent : ViewComponent
{
    private readonly ApplicationDbContext _context;

    public ProductListViewComponent(ApplicationDbContext context)
    {
        _context = context;
    }

    public IViewComponentResult Invoke()
    {
        var products = _context.Products.ToList();
        return View(products);  // Return the view with products
    }
}
```
এখানে, ProductListViewComponent ক্লাসটি ডেটাবেস থেকে পণ্য তালিকা নিয়ে আসে এবং তা ভিউতে পাঠায়।
View Component এর জন্য ভিউ তৈরি করা
View Component এর জন্য ভিউ ফাইল তৈরি করতে হয়, যেটি Views/Shared/Components/ComponentName/Default.cshtml ফোল্ডারে রাখা হয়।
উদাহরণ:
```

@model IEnumerable<Product>

<ul>
@foreach(var product in Model)
{
    <li>@product.Name - @product.Price</li>
}
</ul>
```
View Component ব্যবহার করা
এখন, আপনি আপনার ভিউয়ের মধ্যে ViewComponent রেন্ডার করতে পারেন:
```

<h2>Product List</h2>
@Component.InvokeAsync("ProductList")
```
এখানে, @Component.InvokeAsync("ProductList") দ্বারা ProductListViewComponent ইনভোক করা হচ্ছে এবং তার Default.cshtml ভিউটি রেন্ডার করা হচ্ছে।